<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//数据的验证：
			//1.提交服务器之前（前端js或者jquery表单数据验证）
			//2.服务器的数据验证
			//表单验证方式1：onsubmit 写在form表单中 调用表单验证函数时必须加上return 
			//表单验证方式2：使用普通按钮，添加点击事件，验证表单数据是否合法，调用表单对象的submit()方法提交表单。
			function checkFormData(){
				//alert("提交");
				//返回值，boolean
				//验证用户名
				//验证密码
				var username = document.getElementById("username").value.trim();
				var pwd = document.getElementById("pwd").value.trim();
				var repwd = document.getElementById("repwd").value.trim();
				console.log(checkUsername(username));
				if(checkUsername(username) && checkPwd(pwd) && checkRePwd(repwd)){
					return true;
				}else{
					return false;
				}
			}
			
			//验证用户名
			function checkUsername(v){
				//处理值去掉前后的空格
				v = v.trim();
				var nameerror = document.getElementById("nameerror");
				if(v.length == 0){
					//alert("用户名不能为空!");
					nameerror.innerHTML="用户名不能为空!";
					return false;
				}
				var rp = /^[a-zA-Z]\w{5,9}$/;
				if(!rp.test(v)){
					//alert("用户名不合法!");
					nameerror.innerHTML="用户名不合法!";
					return false;
				}
				nameerror.innerHTML="";
				return true;
			}
			//验证密码
			function checkPwd(v){
				//密码不能为空
				v = v.trim();
				var pwderror = document.getElementById("pwderror");
				if(v.length == 0){
					pwderror.innerHTML="密码不能为空!";
					return false;
				}
				var rp = /^\w{5,9}$/;
				if(!rp.test(v)){
					pwderror.innerHTML="密码不合法!";
					return false;
				}
				pwderror.innerHTML="";
				return true;
			}
			
			//验证密码
			function checkRePwd(v){
				//密码不能为空
				v = v.trim();
				var repwderror = document.getElementById("repwderror");
				if(v.length == 0){
					repwderror.innerHTML="密码不能为空!";
					return false;
				}
				var rp = /^\w{5,9}$/;
				if(!rp.test(v)){
					repwderror.innerHTML="密码不合法!";
					return false;
				}
				//获取密码
				var pwd = document.getElementById("pwd").value.trim();
				if(pwd != v){
					repwderror.innerHTML="两次密码不一致!";
					return false;
				}
				repwderror.innerHTML="";
				return true;
			}
			
			//使用普通按钮提交表单
			function submitForm(){
				var username = document.getElementById("username").value.trim();
				var pwd = document.getElementById("pwd").value.trim();
				var repwd = document.getElementById("repwd").value.trim();
				console.log(checkUsername(username));
				if(checkUsername(username) && checkPwd(pwd) && checkRePwd(repwd)){//通过
					//提交表单，使用js代码提交表单，
					//1.获取表单对象
					if(true){
						document.getElementById("myfrom").setAttribute("action","http://www.baidu.com")
						document.getElementById("myfrom").submit();
					}else{
						document.getElementById("myfrom").setAttribute("action","http://www.jd.com")
						document.getElementById("myfrom").submit();
					}
					
				}
			}
		</script>
		<style>
			span{
				color:red;
			}
		</style>
	</head>
	<body>
		<!--对于提交的表单数据进行前端的验证-->
	<!--	<form action="http://www.baidu.com" method="get" onsubmit="return checkFormData()">
			用户名：<input type="text" name="username" id="username" onblur="checkUsername(this.value)"><span id="nameerror"></span><br>
			密码：<input type="password" name="pwd" id="pwd"  onblur="checkPwd(this.value)"/><span id="pwderror"></span><br>
			确认密码：<input type="password" name="repwd" id="repwd" onblur="checkRePwd(this.value)"/><span id="repwderror"></span><br>
			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
		</form>-->
		<form action="http://www.baidu.com" method="get" id="myfrom">
			用户名：<input type="text" name="username" id="username" onblur="checkUsername(this.value)"><span id="nameerror"></span><br>
			密码：<input type="password" name="pwd" id="pwd"  onblur="checkPwd(this.value)"/><span id="pwderror"></span><br>
			确认密码：<input type="password" name="repwd" id="repwd" onblur="checkRePwd(this.value)"/><span id="repwderror"></span><br>
			<input type="button" value="注册" onclick="submitForm()"/><!--调用表单验证的方法-->
			<input type="reset" value="重置" />
		</form>
	</body>
</html>
